<template>
  <div>

    <div style="margin:10px auto ;width: 1090px;overflow: hidden">
      <el-button @click="find(keyword)" size="mini" icon="el-icon-search" style="float: right;width: 70px;height: 40px;border-radius: 20px;background-color: #009bb3;color: white">搜索</el-button>
      <el-input @keyup.native.enter="find(keyword)" v-model="keyword" placeholder="物资名称" style="width: 150px;float: right;right: 10px;border: solid  #58b195;border-radius: 6px;"/>
    </div>

    <div style="margin:10px auto ;width: 1090px;">
      <el-divider></el-divider>
    </div>


    <!-- 物资详细信息-->
    <div  style="margin:auto ;width: 1090px;">
      <!-- 物资详细信息-->
      <div style="margin-top: 20px">
        <el-row :gutter="20">
          <el-col :span="6" v-for="p in itemShow">
            <el-card>
              <div>
                <a style="color: #3f3f3f;text-decoration: none" :href="'/home/itemDetail?name='+p.name">
                  <img class="p_img" :src="'http://176.17.10.223:18081/'+p.img" width="230" height="230" alt="">
                </a>
              </div>
              <div>
                <a style="color: #3f3f3f;text-decoration: none" :href="'/detail.html?id='+p.id">
                  <p style="font-size: 15px;margin-top: 0;height: 38px">{{p.name}}</p>
                </a>
                <div style="color: #6c6c6c">
                  <span style="float: right">库存:{{p.inventory}}件</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 分页-->
      <div style="margin:20px 0;float: right">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="totalCount">
        </el-pagination>
      </div>
    </div>


  </div>









</template>

<script>
export default {
  data() {
    return {
      keyword:'',
      itemArr:[],
      itemShow:[],
      // 总数据
      tableData:[],
      // 默认显示第几页
      currentPage:1,
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      totalCount:'',
      // 个数选择器（可修改）
      pageSizes:[8,16,32,64],
      // 默认每页显示的条数（可修改）
      PageSize:8,
    }
  },
  created() {
    this.getData();
  },

  methods: {
    getData(){
      //获取所有物资信息
      this.axios.get("http://176.17.10.223:18081/item/list?keyword=").then( (response)=> {
        this.itemArr = response.data.data;
        this.totalCount = this.itemArr.length;
        this.itemShow = this.itemArr.slice(0,this.PageSize)
      })
    },
    // 查找单个用户
    find(keyword) {
      if (keyword != '') {
        let url = 'http://176.17.10.223:18081/item/list'
        let data = 'keyword=' + keyword;
        this.axios.post(url, data).then((response) => {
          // 如果查询到的不是空数据
          if (response.data.data != null) {
            // 先清空用户数组
            this.itemShow = [];
            // 清空搜索的用户
            this.keyword = '';
            this.itemShow = response.data.data;
          } else {
            this.$message({
              message: '物资不存在',
              type: 'error'
            });
          }
        })
      } else {
        // 当搜索的用户是空的时候  需要再执行一次方法拿到数据
        this.itemShow = this.itemArr.slice(0,this.PageSize)
      }
    },
    changShow(pageSize,pageNum){
      let begin= '';
      let end = '';
      // 总页数
      let totalPage=Math.ceil(this.totalCount/pageSize);
      if (totalPage !== pageNum){
        // 当不是最后一页当时候直接截取
        begin = (pageNum-1)*pageSize;
        end = pageNum*pageSize;
        this.itemShow = this.itemArr.slice(begin,end)
      }else {
        // 当是最后一页的时候 截取到末尾
        begin = (pageNum-1)*pageSize;
        this.itemShow = this.itemArr.slice(begin);
      }
    },
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.PageSize=val
      // 点击每页显示的条数时，显示第一页
      this.changShow(val,1)
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage=1
    },
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.currentPage=val

      // 切换页码时，要获取每页显示的条数
      this.changShow(this.PageSize,this.currentPage)
    },
  }
};
</script>

<style>
</style>

